import { computed, readonly, ref, watch } from 'vue'
import { defineStore } from 'pinia'
import { AD_TYPE, MEDIA_TYPE } from '@/constant'
import { trackEvent } from '@/gtm'

export const useDesktopViewerStore = defineStore('desktopViewer', () => {
  const ready = ref(false)

  const viewerRouter = ref(null)

  const currentCreator = ref(null)
  watch(currentCreator, (v) => {
    if (v !== null) {
      let fetcherRef, indexRef
      switch (mediaTypeRef.value.value) {
        case MEDIA_TYPE.VIDEO:
          ;[fetcherRef, indexRef] = [videoFetcherRef, videoIndexRef]
          break
        case MEDIA_TYPE.PHOTO:
          ;[fetcherRef, indexRef] = [photoFetcherRef, photoIndexRef]
          break
        default:
          return
      }
      trackEvent({ key: 1, meta: { id: fetcherRef.value.dataList[indexRef.value.value].id } })
    }
  })

  const currentTag = ref(null)
  const currTabType = computed(() => viewerRouter.value?.currTabType)
  const isCreatorPage = computed(() => viewerRouter.value?.isCreatorPage)
  const disableTransition = computed(() => viewerRouter.value?.disableTransition)

  /** 主播放器的GTM事件Id, 取決於當前MediaViewer的page.type */
  const mainViewerEventId = computed(() => (isCreatorPage.value ? 68 : 63))

  function setViewerRouter(newViewerRouter) {
    viewerRouter.value = newViewerRouter
  }

  function nextToTagList(tag) {
    viewerRouter.value?.nextToTagList(tag)
  }

  function updateCreator(userId) {
    viewerRouter.value?.updateCreator(userId)
  }

  function backToSelfNav() {
    viewerRouter.value?.backToSelfNav()
  }

  const mediaTypeRef = ref(null)

  const foryouIndexRef = ref(null)
  const videoIndexRef = ref(null)
  const photoIndexRef = ref(null)
  const freeIndexRef = ref(null)
  const subsIndexRef = ref(null)
  const shopIndexRef = ref(null)

  const foryouFetcherRef = ref(null)
  const videoFetcherRef = ref(null)
  const photoFetcherRef = ref(null)
  const freeFetcherRef = ref(null)
  const subsFetcherRef = ref(null)
  const shopFetcherRef = ref(null)

  const currIndex = computed({
    get() {
      if (!ready.value) {
        return 0
      }
      switch (mediaTypeRef.value.value) {
        case MEDIA_TYPE.FORYOU:
          return foryouIndexRef.value.value
        case MEDIA_TYPE.VIDEO:
          return videoIndexRef.value.value
        case MEDIA_TYPE.PHOTO:
          return photoIndexRef.value.value
        case MEDIA_TYPE.FREE:
          return freeIndexRef.value.value
        case MEDIA_TYPE.SUBS:
          return subsIndexRef.value.value
        case MEDIA_TYPE.SHOP:
          return shopIndexRef.value.value
        default:
          mediaTypeWarn()
          return 0
      }
    },
    set(index) {
      if (!ready.value) {
        return
      }
      if (index < 0) {
        return
      }
      let fetcherRef, indexRef
      switch (mediaTypeRef.value.value) {
        case MEDIA_TYPE.FORYOU:
          ;[fetcherRef, indexRef] = [foryouFetcherRef, foryouIndexRef]
          break
        case MEDIA_TYPE.VIDEO:
          ;[fetcherRef, indexRef] = [videoFetcherRef, videoIndexRef]
          break
        case MEDIA_TYPE.PHOTO:
          ;[fetcherRef, indexRef] = [photoFetcherRef, photoIndexRef]
          break
        case MEDIA_TYPE.FREE:
          ;[fetcherRef, indexRef] = [freeFetcherRef, freeIndexRef]
          break
        case MEDIA_TYPE.SUBS:
          ;[fetcherRef, indexRef] = [subsFetcherRef, subsIndexRef]
          break
        case MEDIA_TYPE.SHOP:
          ;[fetcherRef, indexRef] = [shopFetcherRef, shopIndexRef]
          break
        default:
          mediaTypeWarn()
          return
      }
      if (index > fetcherRef.value.dataList.length - 1) {
        return
      }

      // 不是廣告才track
      if (![AD_TYPE.VIDEO, AD_TYPE.PHOTO].includes(fetcherRef.value.dataList[indexRef.value.value].type)) {
        trackEvent({ key: 11, meta: { id: fetcherRef.value.dataList[indexRef.value.value].id } })
      }

      indexRef.value.value = index
    },
  })

  const fetcher = computed(() => {
    if (!ready.value) {
      return videoFetcherRef.value
    }
    switch (mediaTypeRef.value.value) {
      case MEDIA_TYPE.FORYOU:
        return foryouFetcherRef.value
      case MEDIA_TYPE.VIDEO:
        return videoFetcherRef.value
      case MEDIA_TYPE.PHOTO:
        return photoFetcherRef.value
      case MEDIA_TYPE.FREE:
        return freeFetcherRef.value
      case MEDIA_TYPE.SUBS:
        return subsFetcherRef.value
      case MEDIA_TYPE.SHOP:
        return shopFetcherRef.value
      default:
        mediaTypeWarn()
        return {}
    }
  })

  function setViewer({
    mediaType = null,

    foryouIndex = null,
    videoIndex = null,
    photoIndex = null,
    freeIndex = null,
    subsIndex = null,
    shopIndex = null,

    foryouFetcher = null,
    videoFetcher = null,
    photoFetcher = null,
    freeFetcher = null,
    subsFetcher = null,
    shopFetcher = null,
  }) {
    mediaTypeRef.value = mediaType

    foryouIndexRef.value = foryouIndex
    videoIndexRef.value = videoIndex
    photoIndexRef.value = photoIndex
    shopIndexRef.value = shopIndex
    subsIndexRef.value = subsIndex
    freeIndexRef.value = freeIndex

    foryouFetcherRef.value = foryouFetcher
    videoFetcherRef.value = videoFetcher
    photoFetcherRef.value = photoFetcher
    freeFetcherRef.value = freeFetcher
    subsFetcherRef.value = subsFetcher
    shopFetcherRef.value = shopFetcher

    ready.value =
      mediaType !== null &&
      (foryouFetcher !== null ||
        videoFetcher !== null ||
        photoFetcher !== null ||
        (shopFetcher !== null && subsFetcher !== null && freeFetcher !== null))
  }

  function mediaTypeWarn() {
    console.warn(`mediaType value is out of boundary, it's only accept VIDEO, PHOTO, and SHOP.`)
  }

  /**
   *  主頁熱門用
   */
  // const {
  //   dataList: popularSetList,
  //   // loading,
  //   // noMore,
  //   // errorMsg,
  //   init: popularSetInit,
  //   refresh,
  //   nextPage: nextPopularSetList,
  // } = useInfinite({
  //   request: API.Media.getPopularSetList,
  // })
  // const popularKey = ref(null)
  // function refreshPopular() {
  //   refresh()
  //   popularKey.value = null
  // }

  return {
    ready,

    currTabType,
    currentCreator,
    currentTag,
    disableTransition,

    viewerRouter,
    setViewerRouter,

    isCreatorPage,
    nextToTagList,
    updateCreator,
    backToSelfNav,

    currIndex,
    fetcher,
    mediaType: mediaTypeRef,
    setViewer,

    // popularSetList,
    // popularSetInit,
    // popularKey,
    // nextPopularSetList,
    // refreshPopular,

    mainViewerEventId: readonly(mainViewerEventId),
  }
})
